<template>
  <div
    class="echart"
    id="mychart"
    :style="myChartStyle"
    style="position: absolute; top: -20px; left: -20px"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      xData: [400, 600, 800, 1000, 1200, 1400, 600, 1800],
      yData: ["牛肉", "羊肉", "番茄", "禽肉", "辣椒", "猪肉", "杂粮", "玉米"],
      myChartStyle: { float: "left", width: "125%", height: "360px" }, //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱状�?
      const option = {
        xAxis: {
          type: "value", // 设置X轴为值轴
          splitLine: {
            show: false, // 设置X轴方向的辅助线是否显�?
          },
          // data: this.xData,
        },
        yAxis: {
          type: "category", // 设置Y轴为名称�?
          data: ["牛肉", "羊肉", "番茄", "禽肉", "辣椒", "猪肉", "杂粮", "玉米"], // Y轴名�?
        },
        series: [
          {
            type: "bar", // 图表类型
            // 柱上面的数值配�?
            label: {
              show: true, // 显示�?
              position: "right", // 显示位置
              color: "white",
            },
            barWidth: "40%", // 设置柱子的�?�度
            data: [200, 400, 600, 800, 1000, 1200, 1400, 600, 1800],
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
